<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="200px">
      <div align="center">
        <label size="large" label-width="280px">— — — — — — — — — — </label><br/>
        <label size="large" label-width="280px">* * * 交通风险模型评估 * * *</label><br/>
        <label size="large" label-width="280px">— — — — — — — — — — </label>
      </div>
      <el-form-item label="编号" prop="number">
        <el-input v-model="formData.number" placeholder="请输入编号" show-word-limit clearable
                  :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item label="车辆类型" prop="cllx">
        <el-select v-model="formData.cllx" placeholder="请选择车辆类型" clearable :style="{width: '80%'}">
          <el-option v-for="(item, index) in cllxOptions" :key="index" :label="item.label" :value="item.value"
                     :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运输化学品类型" prop="yshx">
        <el-select v-model="formData.yshx" placeholder="请选择运输化学品类型" clearable :style="{width: '80%'}">
          <el-option v-for="(item, index) in yshxOptions" :key="index" :label="item.label" :value="item.value"
                     :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="危化品数量" prop="whps">
        <el-select v-model="formData.whps" placeholder="请选择危化品数量" clearable :style="{width: '80%'}">
          <el-option v-for="(item, index) in whpsOptions" :key="index" :label="item.label" :value="item.value"
                     :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在路网类型" prop="szlw">
        <el-select v-model="formData.szlw" placeholder="请选择所在路网类型" clearable :style="{width: '80%'}">
          <el-option v-for="(item, index) in szlwOptions" :key="index" :label="item.label" :value="item.value"
                     :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车辆所在位置道路两边环境" prop="clsz">
        <el-select v-model="formData.clsz" placeholder="请选择车辆所在位置道路两边环境" clearable :style="{width: '80%'}">
          <el-option v-for="(item, index) in clszOptions" :key="index" :label="item.label" :value="item.value"
                     :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否安装在线监控系统" prop="sfaz">
        <el-select v-model="formData.sfaz" placeholder="请选择是否安装在线监控系统" clearable :style="{width: '80%'}">
          <el-option v-for="(item, index) in sfazOptions" :key="index" :label="item.label" :value="item.value"
                     :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="监控是否报警" prop="jksf">
        <el-select v-model="formData.jksf" placeholder="请选择监控是否报警" clearable :style="{width: '80%'}">
          <el-option v-for="(item, index) in jksfOptions" :key="index" :label="item.label" :value="item.value"
                     :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报警处置状态" prop="bjcz">
        <el-select v-model="formData.bjcz" placeholder="请选择报警处置状态" clearable :style="{width: '80%'}">
          <el-option v-for="(item, index) in bjczOptions" :key="index" :label="item.label" :value="item.value"
                     :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="气象状况" prop="qxzk">
        <el-select v-model="formData.qxzk" placeholder="请选择气象状况" clearable :style="{width: '80%'}">
          <el-option v-for="(item, index) in qxzkOptions" :key="index" :label="item.label" :value="item.value"
                     :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="评估结果"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <span>编号:{{number}}；得分：{{score}}；风险等级：{{name}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
  import {handleJT} from "../../../api/edu/risk";

  export default {
    components: {},
    props: [],
    data() {
      return {
        centerDialogVisible : false,
        formData: {
          number: '',
          cllx: undefined,
          yshx: undefined,
          whps: undefined,
          szlw: undefined,
          clsz: undefined,
          sfaz: undefined,
          jksf: undefined,
          bjcz: undefined,
          qxzk: undefined,
        },
        rules: {
          number: [{
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }],
          cllx: [],
          yshx: [],
          whps: [],
          szlw: [],
          clsz: [],
          sfaz: [],
          jksf: [],
          bjcz: [],
          qxzk: [],
        },
        cllxOptions: [{
          "label": "罐式车",
          "value": 1
        }, {
          "label": "厢式车",
          "value": 2
        }, {
          "label": "半挂车、牵引车",
          "value": 3
        }, {
          "label": "其他",
          "value": 4
        }],
        yshxOptions: [{
          "label": "有毒物质、爆炸品、放射性物质",
          "value": 1
        }, {
          "label": "易燃气体、易燃液体、易燃固体",
          "value": 2
        }, {
          "label": "其他危险货物",
          "value": 3
        }],
        whpsOptions: [{
          "label": "≥60吨",
          "value": 1
        }, {
          "label": "大于等于15吨且小于60吨",
          "value": 2
        }, {
          "label": "小于15吨",
          "value": 3
        }],
        szlwOptions: [{
          "label": "双向≤4车道",
          "value": 1
        }, {
          "label": "双向≤8车道",
          "value": 2
        }],
        clszOptions: [{
          "label": "1公里范围内有易燃、可燃液体或可燃气体的生产装置区和储存区",
          "value": 1
        }, {
          "label": "1公里范围内有引用水源、居住区、学校等敏感目标",
          "value": 2
        }, {
          "label": "1公里范围内无敏感目标",
          "value": 3
        }],
        sfazOptions: [{
          "label": "否",
          "value": 1
        }, {
          "label": "是",
          "value": 2
        }],
        jksfOptions: [{
          "label": "否",
          "value": 1
        }, {
          "label": "是",
          "value": 2
        }],
        bjczOptions: [{
          "label": "正在处置",
          "value": 1
        }, {
          "label": "未处置",
          "value": 2
        }],
        qxzkOptions: [{
          "label": "暴雨",
          "value": 1
        }, {
          "label": "低温、高温",
          "value": 2
        }, {
          "label": "雾",
          "value": 3
        }, {
          "label": "雪",
          "value": 4
        }, {
          "label": "其他天气",
          "value": 5
        }],
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      submitForm() {
        handleJT(this.formData).then(response => {
          console.log(response)
          this.number = response.number;
          this.score = response.score,
            this.name = response.name,
            this.centerDialogVisible = true
        });
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  }

</script>
<style>
</style>
